<template>
    <div class="crouse-section">
        <el-card>
            <div slot="header">
                {{crouseTitle}}
            </div>
            <el-tree :data="sections" :props="defaultProps" draggable :prop="defaultProps" :allow-drop="handleAllowDrop" @node-drop="nodeDrop">
                <div class="inner" slot-scope="{node,data}">
                    <span>{{node.label}}</span>
                    <span class="actions" v-if="data.sectionName">
                        <el-button size="small" @click.stop="openSectionUpload(data)">编辑</el-button>
                        <el-button size="small" type="primary" @click.stop="openLessonUpload(data,node)">添加课时</el-button>
                        <el-select size="small" v-model="data.status" class="onlineSelect" @change="val=>{statusChangesection(val,node)}">
                          <el-option label="已隐藏" :value="0"></el-option>
                          <el-option label="待更新" :value="1"></el-option>
                          <el-option label="已更新" :value="2"></el-option>
                        </el-select>
                    </span>
                    <span class="actions" v-else>
                        <el-button size="small"  @click.stop="openLessonUpload(data,node)">编辑</el-button>
                        <el-button size="small" type="success" @click.stop="openVideo(data,node)">上传视频</el-button>
                        <el-select size="small" v-model="data.status" class="onlineSelect" @change="val=>{statusChangeLess(val,node)}">
                          <el-option label="已隐藏" :value="0"></el-option>
                          <el-option label="待更新" :value="1"></el-option>
                          <el-option label="已更新" :value="2"></el-option>
                        </el-select>
                    </span>
                </div>
            </el-tree>
        </el-card>

        <el-dialog title="章节信息" :visible.sync="sectionInfoFlag">
            <el-form :data="sectionForm" label-position="left" label-width="80px">
                <el-form-item prop="courseName" label="课程名称">
                    <el-input v-model="sectionForm.courseName" disabled></el-input>
                </el-form-item>
                <el-form-item prop="sectionName" label="章节名称">
                    <el-input v-model="sectionForm.sectionName"></el-input>
                </el-form-item>
                <el-form-item prop="description" label="章节描述">
                    <el-input v-model="sectionForm.description"></el-input>
                </el-form-item>
                <el-form-item prop="orderNum" label="章节排序">
                    <el-input v-model="sectionForm.orderNum" type="number"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="" @click="()=>{sectionInfoFlag=false}">取消</el-button>
                    <el-button type="primary" @click="onSaveSection">确定</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <el-dialog title="课时基本信息" :visible.sync="lessonInfoFlag">
            <el-form :data="lessonForm" label-position="left" label-width="100px">
                <el-form-item prop="courseName" label="课程名称">
                    <el-input v-model="lessonForm.courseName" disabled></el-input>
                </el-form-item>
                <el-form-item prop="sectionName" label="章节名称">
                    <el-input v-model="lessonForm.sectionName" disabled></el-input>
                </el-form-item>
                <el-form-item prop="description" label="课时名称">
                    <el-input v-model="lessonForm.theme"></el-input>
                </el-form-item>
                <el-form-item prop="duration" label="时长">
                    <el-input v-model="lessonForm.duration" type="number"></el-input>
                </el-form-item>
                <el-form-item prop="isFree" label="是否开放试听">
                    <el-switch v-model="lessonForm.isFree" type="number"></el-switch>
                </el-form-item>
                <el-form-item prop="orderNum" label="课时排序">
                    <el-input v-model="lessonForm.orderNum" type="number"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="" @click="()=>{lessonInfoFlag=false}">取消</el-button>
                    <el-button type="primary" @click="onSaveLesson">确定</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

         <el-dialog title="上传视频" :visible.sync="videoFlag">
            <el-form :data="videoForm" label-position="left" label-width="80px">
                <el-form-item prop="courseName" label="课程名称">
                    <el-input v-model="videoForm.courseName" disabled></el-input>
                </el-form-item>
                <el-form-item prop="description" label="课时名称">
                    <el-input v-model="videoForm.theme" disabled></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="" @click="()=>{lessonInfoFlag=false}">取消</el-button>
                    <el-button type="primary" @click="onSaveLesson">开始上传</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

    </div>
</template>
<script lang="ts">
import Vue from 'vue'
import { getSectionAndLesson, getCourseById, saveOrUpdateSection, saveOrUpdate } from '@/service/crouse'

export default Vue.extend({
  name: 'section',
  props: {
    id: {
      type: [String, Number],
      required: true
    }
  },
  created () {
    this.loadSections()
  },
  data () {
    return {
      crouseTitle: '课程管理',
      sectionForm: {},
      sectionInfoFlag: false,
      lessonInfoFlag: false,
      videoFlag: false,
      lessonForm: { sectionName: '' },
      videoForm: {},
      defaultProps: {
        children: 'lessonDTOS',
        label (data:any) {
          return data.sectionName || data.theme
        }
      },
      sections: [{ id: '', lessonDTOS: [{ id: '' }] }]
    }
  },
  methods: {
    async loadSections () {
      const { data } = await getSectionAndLesson(this.id)
      this.sections = data.data
      const { data: result } = await getCourseById({ courseId: this.id })
      this.crouseTitle = result.data.courseName
    },
    handleAllowDrop (draggingNode:any, dropNode:any, type:any) {
      if (type === 'inner') {
        return false
      }
      if (draggingNode.data.sectionId !== dropNode.data.sectionId) {
        return false
      }
      // draggingNode 拖动的节点
      // dropNode：目标节点
      // type：拖动情况'prev'、'inner' 和 'next'，分别表示放置在目标节点前、插入至目标节点和放置在目标节点后
      return true
    },
    openSectionUpload (row?:any) {
      this.sectionInfoFlag = true

      if (row) {
        this.sectionForm = { ...row }
      }
      Vue.set(this.sectionForm, 'courseName', this.crouseTitle)
    },
    async onSaveSection () {
      const { data } = await saveOrUpdateSection(this.sectionForm)
      if (data.code === '000000') {
        this.$message.success(data.mesg)
        this.sectionInfoFlag = false
      } else {
        this.$message.error(data.mesg)
      }
    },
    openLessonUpload (row?:any, node?:any) {
      console.log(row)
      this.lessonInfoFlag = true
      if (row) {
        this.lessonForm = { ...row }
      }
      Vue.set(this.lessonForm, 'courseName', this.crouseTitle)
      //   console.log(node.parent.data.sectionName)
      this.lessonForm.sectionName = node.parent.data.sectionName
    //   Vue.set(this.lessonForm, 'sectionName', node.parent.data.sectionName)
    },
    async onSaveLesson () {
      const { data } = await saveOrUpdate(this.lessonForm)
      if (data.code === '000000') {
        this.$message.success(data.mesg)
        this.lessonInfoFlag = false
      } else {
        this.$message.error(data.mesg)
      }
    },
    async statusChangeLess (val:number, node:any) {
      const { data } = await saveOrUpdate({ status: val, data: node.data, id: node.data.id })
      if (data.code === '000000') {
        this.$message.success(data.mesg)
      } else {
        this.$message.error(data.mesg)
      }
    },
    async statusChangesection (val:number, node:any) {
      const { data } = await saveOrUpdateSection({ status: val, data: node.data, id: node.data.id })
      if (data.code === '000000') {
        this.$message.success(data.mesg)
      } else {
        this.$message.error(data.mesg)
      }
    },
    nodeDrop (draggingNode:any, dropNode:any) {
      console.log(draggingNode)
      console.log(dropNode)
      if (draggingNode.level === 1) {
        for (const i in this.sections) {
          saveOrUpdateSection({ id: this.sections[i].id, orderNum: i })
        }
      } else {
        const list = this.sections.filter(item => {
          return item.id === draggingNode.data.sectionId
        })

        for (const i in list[0].lessonDTOS) {
          saveOrUpdate({ id: list[0].lessonDTOS[i].id, orderNum: i })
        }
      }
    },
    openVideo (data:any, node:any) {
      this.$router.push({ name: 'course-video', params: { id: data.id }, query: { sectionId: node.parent.id, lessonId: data.id, theme: data.theme, sectionName: this.crouseTitle } })
    }
  }

})
</script>
<style lang="scss" scoped>
.inner{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex:1;
    padding: 10px;
    border-bottom:1px solid #ebeef5
}
::v-deep .el-tree-node__content{
    height:auto;
}

.onlineSelect{
  width:100px
}
</style>
